@charset "utf-8";
$fontSize:40;
@function r($p) {
    @return $p/$fontSize*1rem;
}
html,body{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.gameWrap{
//  display: none;
    width: r(3808);
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    //背景
    .gamebg{
        width: 9999px;
        height: 100%;
        font-size:0;
        background: #ffbc3b;
        position: absolute;
        top: 0;
        left: 0;
        li{
            height: 100%;
            float: left;
            font-size: 0; 
            >img{
                height: 100%;
                vertical-align: bottom;
            }
        }
    }
    //云
    .cloud,.cloud2{
        width: 9999px;
        height: 20%;
        font-size:0;
        position: absolute;
        bottom: 0;
        left: 0;
         li{
            height: 100%;
            float: left;
            font-size: 0; 
            >img{
                height: 100%;
                vertical-align: bottom;
            }
        }
    }
    //人物
    .person{
        position: absolute;
        top:8.3rem;
        left: -20%;
        width: r(100);
        height: r(200);
        font-size: 0;
        overflow: hidden;
        z-index: 1;
        img{
            height: 100%;
            position: absolute;
            left:0;
            top: 0;
        }
    }
    
    //行道
    .road{
        width: r(784);
        height: r(38);
        position: absolute;
        top: 55%;
        left: 0;   
        font-size: 0;
        img{
          height: 100%;  
        }
    }

}



    .Road1,.Road2{
        width: r(613);
        height: r(38);
        position: absolute;
//      top:r(300);
        left: 100%;
       .Goods{
           width: 100%;
           position: absolute;
           top: 0;
           left: 0;
           .goods{
               width:r(173);
               position: absolute;
               img{
                   width: 100%;
               }
           }
           .goodstone{
               width: r(52);
               position: absolute;
               img{
                   width: 100%;
               }
           }
       }
       .roadImg{
           width: 100%;
           height: r(38);
           position: absolute;
//         bottom: 0;
           left: 0;
           >img{
            height: 100%;
           }
       }
    }
    .scoreImg{
        position: absolute;
        z-index: 99;
        top: 0;
        left: 0;
        height: r(88);
        font-size: r(50);
        img{
            height: 100%;
        }
        .score{
            position: absolute;
            z-index: 100;
            top: r(7);
            left: r(110);
            font-size: r(50);
            color: #cf4e1d;
            box-shadow: 5px yellow;
        }  
    }
    .lifeImg{
       position: absolute;
       z-index: 99;
       top: r(20);
       right: 0;
       height: r(52);
       font-size: r(50);
       li{
           float:left;
           height: r(52);
           img{
               height: 100%;
           }
       }
    } 
     

//游戏结束
.overWrap{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.9);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 101;
    display:none;
    justify-content: center;
    flex-wrap: wrap;
}
.banner{
    width: 100%;
    height: r(104);
    overflow: hidden;
    >img{
        width: 100%;
    }
}
.overView{
    width: r(430);
    height: r(430);
    margin: 0 auto;
    position: relative;
    img{
        width: 100%;
    }
    >.tit{
        position: absolute;
        top:r(200);
        left: 50%;
        transform: translateX(-50%);
        width: r(130);
        height: r(40);
        font-size: r(23);
        font-weight: bold;
        text-align: center;
        
    }
    >p{
        position: absolute;
        top:r(240);
        left: 50%;
        width: r(150);
        transform: translateX(-45%);
        font-size: r(23);
        line-height: r(60);
        vertical-align:text-bottom;
        font-weight: bold;
        text-align: center;
        em{
            font-size: r(60);
            color: #e32424;
        }
    }
}
.overBtn{
    width: r(450);
    height: r(200);
    font-size: r(27);
    margin: 0 auto;
    color: #fff;
    display: flex;
    justify-content: space-between;
    .againP,.look_rank,.shareBtn{
        width: r(110);
        display: block;
        color: #fff;
        img{
            width: 100%;
        }
        p{
            text-align: center;
        }
        span{
            display: inline-block;
            width: r(150);
            font-size: r(18);
            text-align: center;
            margin-left: r(-20);
        }
    }
}
.applyBtn{
    width: r(526);
    height: r(100);
    border-radius: r(43);
    background: #FFF;
    position: relative;
    margin: r(40) auto;
    .applyshade{
        width: r(517);
        height: r(92);
        border-radius: r(43);
        background: #b7000b;
        position: absolute;
        top: r(3);
        left:50%;
        transform:translateX(-50%);
    }
    .applyCon{
        width:r(517);
        height: r(87);
        border-radius: r(43);
        background: #f23c24;
        text-align: center;
        a{
            color: #fff;
            text-align: center;
            line-height: r(87);
        }
    }
}

.sponsor{
    width: 100%;
    font-size: r(23);
    text-align: center;
    color: #fff;
}


//分享
.share{
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 111;
    background: rgba(0,0,0,.5);
    overflow: hidden;
    .share_img{
        width: r(360);
        height: r(445);
        position: absolute;
        right: r(100);
        top: r(34);
        img{
            width: 100%;
        }
    }
}

.roll{
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: roll;
    animation-name: roll;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes roll{
    0%{
        transform: rotate(0deg);
    }
    25%{
        transform: rotate(180deg);
    }
    50%{
        transform: rotate(360deg);
    }
    75%{
        transform: rotate(540deg);
    }
    100%{
        transform: rotate(720deg);
    }
}